/*-------------------------------

    Global

--------------------------------- */

@import "~bulma/css/bulma.min.css";
@import "./icomoon/style.css";

.gap-top {
	margin-top: 1rem;
}

/* title underline */
.has-shadow-yellow {
	box-shadow: inset 0 -6px 0 rgba(255,221,87,.2);
}

.has-shadow-violet {
	box-shadow: inset 0 -6px 0 rgba(184,107,255,.2);
}

.has-shadow-blue {
	box-shadow: inset 0 -6px 0 rgba(4,126,212,.2);
}

.has-shadow-green {
	box-shadow: inset 0 -6px 0 rgba(35,209,153,.2);
}

/* scrollbar */
::-webkit-scrollbar {
	width: 5px;
	background-color: #fff
}

::-webkit-scrollbar-thumb {
	border-radius: 2px;
	background-color: #4a4a4a
}

::-webkit-scrollbar-track {
	background-color: #fff
}

/* cover Bulma default style */
.button {
	box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);
	-webkit-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}

.button:hover {
	box-shadow: 0 10px 20px hsla(0,0%,86.3%,.5);
	-webkit-transform: translateY(-3px);
	transform: translateY(-3px);
}

.box {
	box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);
	border-radius: 6px;
}

.card {
	box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);
	border-radius: 6px;
	transition: all .2s ease-in-out;
}

.card:hover {
	box-shadow: 0 10px 20px hsla(0,0%,86.3%,.5);
	transform: translateY(-3px);
	-webkit-transform: translateY(-3px);
}

.card img {
	border-radius: 6px 6px 0px 0px;
}

/* animation */
.jump-in {
	animation: jump-in .5s ease;
	-webkit-animation: jump-in .5s ease;
}

@keyframes jump-in {
	0% {
		transform: translateY(60px);
		-webkit-transform: translateY(60px);
	}

	60% {
		transform: translateY(-4px);
		-webkit-transform: translateY(-4px);
	}

	100% {
		transform: translateY(0);
		-webkit-transform: translateY(0);
	}
}

.fade-jump-in {
	animation: fade-jump .6s ease;
	-webkit-animation: fade-jump .6s ease;
}

@keyframes fade-jump {
	0% {
		opacity: 0;
		transform: translateY(45px);
		-webkit-transform: translateY(45px);
	}

	60% {
		opacity: 1;
		transform: translateY(-20px);
		-webkit-transform: translateY(-20px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
		-webkit-transform: translateY(0);
	}
}

.is-float-text {
	-webkit-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}

.is-float-text:hover {
	-webkit-transform: translateY(-3px);
	transform: translateY(-3px);
}